<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>皇甫酱菜</title>
<!-- ALL STYLESHEET -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/responsive.css" rel="stylesheet">
</head>
<body>

	<!-- header -->
	<header class="header"> <!-- header top -->
	<div class="header-top">
		<div class="container">
			<div class="row">
				<div class="col-sm-1">
					<ul class="list-inline">
						<li>
							<div>
								<a class="dropdown-toggle" data-toggle="dropdown"
									aria-haspopup="true" aria-expanded="false"><img
									src="/images/is.png" alt="" /> 中国 </a>
							</div>
						</li>
					</ul>
				</div>
				<div class="col-sm-9">
					<ul class="list-inline">
						<li><a href="#"><i class="fa fa-mobile"></i>0530-5637355</a></li>
						<li><a href="#"><i class="fa fa-envelope-o"></i>liyongguan_soft@126.com</a></li>
					</ul>
				</div>
				<div class="col-sm-2">
					<ul class="list-inline pull-right">
						<li><a href="javascript:;" title="Login or Register"><i
								class="icon fa fa-user fa-lg"></i><span>登录|注册</span></a></li>
					</ul>

				</div>
			</div>
		</div>
	</div>

	<!-- logo and adds -->
	<div class="logo-add">
		<div class="container">
			<div class="row">
				<div class="col-sm-4">
					<div class="logo">
						<i class="fa "></i>皇甫 - 酱菜 - 总店
					</div>
				</div>
				<div class="col-sm-4">
					<h4 class="add bb-year-end-ribbon hidden-xs">
						<span> 欢 迎 <span> 惠 顾 </span> 本 店 ！
						</span>
					</h4>
				</div>
				<div class="col-sm-4">
					<ul class="list-inline pull-right">
						<li><a href="../cart" title="购物车"><i
								class="icon fa fa-shopping-cart fa-lg"></i><span>购物车</span></a></li>
					</ul>
				</div>

			</div>
		</div>
	</div>

	<!-- header bottom -->
	<div class="header-bottom">
		<div class="row">
			<div class="col-sm-12">
				<nav class="navbar navbar-default">
				<div class="container">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="collapse navbar-collapse" id="header-bottom">
						<ul class="nav navbar-nav">
							<li class="active"><a href="../index">首页</a></li>
							<li><a href="../product">商品</a></li>
							<li><a href="../faq">F&Q(问答)</a></li>
							<li><a href="blog.html">Blog</a></li>
							<li><a href="blog-details.html">Blog Detail</a></li>
							<li><a href="../about">关于我们</a></li>
							<li><a href="../contact">联系我们</a></li>
						</ul>
						<form class="navbar-form navbar-right" role="sousuo">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="搜索...">
								<span class="nav-search"><a href="#"><i
										class="fa fa-search"></i></a></span>
							</div>
						</form>
					</div>
				</div>
				</nav>
			</div>
		</div>
	</div>
	</header>


	<!-- recommented products -->
	<section class="featured-product recommented-product">
	<div class="container">
		<div class="row">
			<div class="col-sm-3">
				<div class="sidebar">
					<div class="well wedget">
						<strong>价格</strong>
						<div class="heading-border b-color-6"></div>

						<div class="progress">
							<div class="progress-bar progress-bar-info" role="progressbar"
								aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
								style="width: 20%">
								<span class="sr-only">20% Complete</span>
							</div>
						</div>

						<small>Currency Shopping By :</small>
						<p>
							Price : <span>$260 - $980</span>
						</p>

						<a class="btn btn-default btn-block" href="#">搜索</a>
					</div>
					<div class="well wedget">
						<strong>分类</strong>
						<div class="heading-border b-color-6"></div>

						<ul class="check-box">
							<li>
								<div class="btn-group" data-toggle="buttons">
									<label class="btn btn-primary active"> <input
										type="checkbox" autocomplete="off" checked><i
										class="fa fa-check"></i>
									</label>Asus - <span class="pull-right">846</span>
								</div>
							</li>
							<li>
								<div class="btn-group" data-toggle="buttons">
									<label class="btn btn-primary active"> <input
										type="checkbox" autocomplete="off" checked><i
										class="fa fa-check"></i>
									</label>HP - <span class="pull-right">789</span>
								</div>
							</li>
							<li>
								<div class="btn-group" data-toggle="buttons">
									<label class="btn btn-primary active"> <input
										type="checkbox" autocomplete="off" checked><i
										class="fa fa-check"></i>
									</label>Apple - <span class="pull-right">313</span>
								</div>
							</li>
							<li>
								<div class="btn-group" data-toggle="buttons">
									<label class="btn btn-primary active"> <input
										type="checkbox" autocomplete="off" checked><i
										class="fa fa-check"></i>
									</label>Dell - <span class="pull-right">452</span>
								</div>
							</li>
							<li>
								<div class="btn-group" data-toggle="buttons">
									<label class="btn btn-primary active"> <input
										type="checkbox" autocomplete="off" checked><i
										class="fa fa-check"></i>
									</label>Acer - <span class="pull-right">46</span>
								</div>
							</li>
						</ul>
						<a class="btn btn-default btn-block" href="#">搜索</a>
					</div>
					
					<div class="well wedget footer-top">
						<strong>热销产品</strong>
						<div class="heading-border b-color-6"></div>
						<ul class="media-list">
							<li class="media">
								<div class="media-left">
									<img src="images/featured-1.jpg" alt="">
								</div>
								<div class="media-body">
									<p class="media-heading">Lorem ipsum dolor</p>
									<div class="category">
										<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
											class="fa fa-star"></i> <i class="fa fa-star"></i> <i
											class="fa fa-star-o"></i>
									</div>
									<strong>$899.99</strong>
								</div>
							</li>
							<li class="media">
								<div class="media-left">
									<img src="images/featured-1.jpg" alt="">
								</div>
								<div class="media-body">
									<p class="media-heading">Lorem ipsum dolor</p>
									<div class="category">
										<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
											class="fa fa-star"></i> <i class="fa fa-star"></i> <i
											class="fa fa-star-o"></i>
									</div>
									<strong>$899.99</strong>
								</div>
							</li>
						</ul>
					</div>
					<div class="well text-widget wedget">
						<strong>Text Widget</strong>
						<div class="heading-border b-color-6"></div>
						<p>Lorem ipsum dolor sit amet, no mea aeterno indoctum
							percipitur. Homero quaerendum ius ei. In pro decore tamquam
							appetere, ea mentitum mediocrem efficiantur quo.</p>
					</div>
				</div>
				<!-- sidebar -->
			</div>
			<div class="col-sm-9">
				

				<!-- desktop -->
				<div class="featured-product desktop">
					<div class="row">
						<div class="col-sm-12">
							<div class="row">
								<div class="col-sm-12">
									<h1>
										<span class="t-color-6">商品</span>
									</h1>
									<div class="heading-border b-color-6"></div>
								</div>
							</div>
							<!-- section title -->
							<div class="row hidden-xs">
								<div class="col-sm-12">
									<nav class="navbar navbar-default desk-nav"> 
									<div class="navbar-header">
										<button type="button" class="navbar-toggle collapsed"
											data-toggle="collapse" data-target="#desktop"aria-expanded="false">
											<span class="sr-only">Toggle navigation</span> <span
												class="icon-bar"></span> <span class="icon-bar"></span> <span
												class="icon-bar"></span>
										</button>
									</div>

									<div class="collapse navbar-collapse" id="desktop">
										<div class="navbar-form nav navbar-nav navbar-left">
											<div class="selection">
												
												排序<select class="form-control">
													<option>默认</option>
													<option>价格</option>
													<option>销量</option>
												</select> 
											</div>

											<div class="selection">
												 <select class="form-control ">
													<option>升序</option>
													<option>降序</option>
												</select>
											</div>
										</div>

									</div>
									</nav>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-4">
									<div class="thumbnail">
										<!--span class="e-label"><div>Sale</div></span-->
										<span class="service-link text-center"> <img
											class="img-responsive" src="images/f-pro-1.jpg" alt="">
											<div class="list-inline">
												<a href=""><i class="fa fa-eye"></i></a> <a href=""><i
													class="fa fa-link"></i></a>
											</div>
										</span>
										<div class="caption">
											<div class="category">
												category
												<div class="pull-right">
													<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star-o"></i>
												</div>
											</div>
											<h3>Lorem ipsum dolor sit amet dolorem molestie</h3>
											<strong>$899.00</strong>
											<div>
												<button  class="btn btn-default" onclick="add()">加入购物车</button>
												<strong><span class="pull-right"><iclass="fa fa-heart-o"></i> 销量：100</span></strong>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="thumbnail">
										<span class="service-link text-center"> <img
											class="img-responsive" src="images/f-pro-1.jpg" alt="">
											<div class="list-inline">
												<a href=""><i class="fa fa-eye"></i></a> <a href=""><i
													class="fa fa-link"></i></a>
											</div>
										</span>
										<div class="caption">
											<div class="category">
												category
												<div class="pull-right">
													<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star-o"></i>
												</div>
											</div>
											<h3>Lorem ipsum dolor sit amet dolorem molestie</h3>
											<strong>$899.00</strong>
											<div>
												<button  class="btn btn-default" onclick="add()">加入购物车</button>
												<strong><span class="pull-right"><iclass="fa fa-heart-o"></i> 销量：100</span></strong>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="thumbnail">
										<span class="service-link text-center"> <img
											class="img-responsive" src="images/f-pro-1.jpg" alt="">
											<div class="list-inline">
												<a href=""><i class="fa fa-eye"></i></a> <a href=""><i
													class="fa fa-link"></i></a>
											</div>
										</span>
										<div class="caption">
											<div class="category">
												category
												<div class="pull-right">
													<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star-o"></i>
												</div>
											</div>
											<h3>Lorem ipsum dolor sit amet dolorem molestie</h3>
											<strong>$899.00</strong>
											<div>
												<button  class="btn btn-default" onclick="add()">加入购物车</button>
												<strong><span class="pull-right"><iclass="fa fa-heart-o"></i> 销量：100</span></strong>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-4">
									<div class="thumbnail">
										<!--span class="e-label"><div>Sale</div></span-->
										<span class="service-link text-center"> <img
											class="img-responsive" src="images/f-pro-1.jpg" alt="">
											<div class="list-inline">
												<a href=""><i class="fa fa-eye"></i></a> <a href=""><i
													class="fa fa-link"></i></a>
											</div>
										</span>
										<div class="caption">
											<div class="category">
												category
												<div class="pull-right">
													<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star-o"></i>
												</div>
											</div>
											<h3>Lorem ipsum dolor sit amet dolorem molestie</h3>
											<strong>$899.00</strong>
											<div>
												<button  class="btn btn-default" onclick="add()">加入购物车</button>
												<strong><span class="pull-right"><iclass="fa fa-heart-o"></i> 销量：100</span></strong>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="thumbnail">
										<span class="service-link text-center"> <img
											class="img-responsive" src="images/f-pro-1.jpg" alt="">
											<div class="list-inline">
												<a href=""><i class="fa fa-eye"></i></a> <a href=""><i
													class="fa fa-link"></i></a>
											</div>
										</span>
										<div class="caption">
											<div class="category">
												category
												<div class="pull-right">
													<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star-o"></i>
												</div>
											</div>
											<h3>Lorem ipsum dolor sit amet dolorem molestie</h3>
											<strong>$899.00</strong>
											<div>
												<button  class="btn btn-default" onclick="add()">加入购物车</button>
												<strong><span class="pull-right"><iclass="fa fa-heart-o"></i> 销量：100</span></strong>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="thumbnail">
										<span class="service-link text-center"> <img
											class="img-responsive" src="images/f-pro-1.jpg" alt="">
											<div class="list-inline">
												<a href=""><i class="fa fa-eye"></i></a> <a href=""><i
													class="fa fa-link"></i></a>
											</div>
										</span>
										<div class="caption">
											<div class="category">
												category
												<div class="pull-right">
													<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star-o"></i>
												</div>
											</div>
											<h3>Lorem ipsum dolor sit amet dolorem molestie</h3>
											<strong>$899.00</strong>
											<div>
												<button  class="btn btn-default" onclick="add()">加入购物车</button>
												<strong><span class="pull-right"><iclass="fa fa-heart-o"></i> 销量：100</span></strong>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-4">
									<div class="thumbnail">
										<!--span class="e-label"><div>Sale</div></span-->
										<span class="service-link text-center"> <img
											class="img-responsive" src="images/f-pro-1.jpg" alt="">
											<div class="list-inline">
												<a href=""><i class="fa fa-eye"></i></a> <a href=""><i
													class="fa fa-link"></i></a>
											</div>
										</span>
										<div class="caption">
											<div class="category">
												category
												<div class="pull-right">
													<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star-o"></i>
												</div>
											</div>
											<h3>Lorem ipsum dolor sit amet dolorem molestie</h3>
											<strong>$899.00</strong>
											<div>
												<button  class="btn btn-default" onclick="add()">加入购物车</button>
												<strong><span class="pull-right"><iclass="fa fa-heart-o"></i> 销量：100</span></strong>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="thumbnail">
										<span class="service-link text-center"> <img
											class="img-responsive" src="images/f-pro-1.jpg" alt="">
											<div class="list-inline">
												<a href=""><i class="fa fa-eye"></i></a> <a href=""><i
													class="fa fa-link"></i></a>
											</div>
										</span>
										<div class="caption">
											<div class="category">
												category
												<div class="pull-right">
													<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star-o"></i>
												</div>
											</div>
											<h3>Lorem ipsum dolor sit amet dolorem molestie</h3>
											<strong>$899.00</strong>
											<div>
												<button  class="btn btn-default" onclick="add()">加入购物车</button>
												<strong><span class="pull-right"><iclass="fa fa-heart-o"></i> 销量：100</span></strong>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="thumbnail">
										<span class="service-link text-center"> <img
											class="img-responsive" src="images/f-pro-1.jpg" alt="">
											<div class="list-inline">
												<a href=""><i class="fa fa-eye"></i></a> <a href=""><i
													class="fa fa-link"></i></a>
											</div>
										</span>
										<div class="caption">
											<div class="category">
												category
												<div class="pull-right">
													<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star-o"></i>
												</div>
											</div>
											<h3>Lorem ipsum dolor sit amet dolorem molestie</h3>
											<strong>$899.00</strong>
											<div>
												<button  class="btn btn-default" onclick="add()">加入购物车</button>
												<strong><span class="pull-right"><iclass="fa fa-heart-o"></i> 销量：100</span></strong>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- desktop -->
				<!-- pagination -->
				<nav>
				<ul class="pagination">
					<li><a href="#" aria-label="Previous"><span
							aria-hidden="true">&laquo;</span></a></li>
					<li><a href="#">1</a></li>
					<li class="active"><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
					</li>
				</ul>
				</nav>
			</div>
			<!--div 9 -->
		</div>
	</div>
	</section>

	<footer>
	<div class="footer-top">
		<div class="container">
			<div class="row">
				<div class="col-sm-3">
					<h2>About E-Market</h2>
					<div class="heading-border b-color-1"></div>
					<p>Nam apeirian assentior ei, utquo eros posse verterem. Cum eu
						error congue saperet. Te eam exerci vulputate consetetur, causae
						consulatu eaper, apeirian assentior ei, utquo eros posse verterem.
						Cum eu error congue saperet. Te eam exerci vulputate consetetur,
						causae consulatu eaper</p>
					<div>
						<a href="">Read More <i class="fa fa-angle-double-right"></i></a>
					</div>
					<strong>Newsletter</strong>
					<form class="navbar-for" role="email">
						<div class="form-group">
							<input type="text" class="form-control"
								placeholder="Email Address"> <span class="nav-search"><a
								href="#"><i class="fa fa-envelope"></i></a></span>
						</div>
					</form>
					<small>Eros posse verterem congue saperet.</small>
				</div>
				<div class="col-sm-3">
					<h2>Featured Products</h2>
					<div class="heading-border b-color-1"></div>

				</div>
				<div class="col-sm-3">
					<h2>Latest News</h2>
				</div>
				<div class="col-sm-3">
					<h2>Contact us</h2>
					<div class="heading-border b-color-1"></div>
					<strong class="media-heading">Address</strong>
					<p>Lebel 2, 13 Elezabe St, Melbounire, Victoria 3000, +8492575,
						USA</p>

					<strong class="media-heading">Phone & Fax</strong>
					<p>+880183947930</p>
					<p>+(980)1839479</p>

					<strong class="media-heading">E-Mail Address</strong>
					<p>support@gmail.com</p>
					<p>example@gmail.com</p>
				</div>
			</div>
		</div>
	</div>
	<div class="footer-bottom">
		<div class="container">
			<div class="row">
				<div class="col-sm-12 text-center">
					<p>
						Copyright 2015 made by <a href="#">Bootultra.com</a> & Disign by
						Shaifuddin. All Rights Reserved.
					</p>
				</div>
			</div>
		</div>
	</div>
	</footer>

	<!-- ALL JAVASCRIPT -->
	<script src="/js/jquery.js"></script>
	<script src="/bootstrap/js/bootstrap.min.js"></script>
	<script src="/js/custom.js"></script>
</body>
</html>